<template>
  <Container>
    <div class="container-header" slot="header" v-show="tab == 'tab1'">
      <Form class="search">
        <Row>
          <Col span="6">
            <FormItem label="促销编码">
              <Input v-model="list.form.activitySn" placeholder="请输入促销编码" @on-enter="onSearchBtnClick"/>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="SKU编码">
              <Input v-model="list.form.skuId" placeholder="请输入SKU编码" @on-enter="onSearchBtnClick"/>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="商品编码">
              <Input v-model="list.form.spuId" placeholder="请输入商品编码" @on-enter="onSearchBtnClick"/>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="促销类型">
              <Select v-model="list.form.activityType" clearable @on-change="onSearchBtnClick">
                <Option v-for="item in options.typeList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="1" class-name="search small">
            <Button class="btn-search" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <TabPane label="审核促销" name="tab1">
        <Alert type="warning" show-icon>为保护商家利益，审核促销时需对促销进行逐一审核!</Alert>
        <Table 
          :height="options.tableHeight - 45"
          stripe 
          :columns="list.columns" 
          :data="list.data"></Table>
        <div class="pager">
          <Page 
            :total="list.totalItem" 
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"></Page>
        </div>
        <Loader :status="list.status" @refresh="onSearchBtnClick"></Loader>
      </TabPane>
      <TabPane label="审核规则" name="tab2" class="overScrollY">
        <RuleListItem></RuleListItem>
      </TabPane>
    </Tabs>
  </Container>
</template>
<script>
import table from '@/table'
import { clearEmpty } from '@/util'
import AuditListData from './list/AuditListData';
import RuleListItem  from './list/RuleListItem'
export default {
  name: 'sales/examine/list',
  components: {
    RuleListItem
  },
  data () {
    return {
      tab: 'tab1',
      list: AuditListData,
      options: {
        tableHeight: 300,
        typeList: [{
          value: 0,
          label: '单品'
        }, {
          value: 1,
          label: '赠品'
        }, {
          value: 2,
          label: '满减'
        }, {
          value: 3,
          label: '满赠'
        }, {
          value: 4,
          label: '满减送'
        }, {
          value: 5,
          label: '多买优惠'
        }, {
          value: 6,
          label: '满额返券'
        }, {
          value: 7,
          label: '工厂促销'
        }],
      }
    }
  },
  mounted() {
    this.initTable()
    this.onSearchBtnClick()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    getStatus(item) {
      let text = ''
      switch (item.checkStatusEnum) {
        case 'UNCHECKED':
          text = '未审核'
          break;
        case 'REJECT':
          text = '已驳回'
          break;
        case 'PASS':
          switch (item.isPause) {
            case true:
              text = '已暂停'
              break;
            case false:
              let now = new Date()
              let isEarly = this.compareDate(now, item.startDate)
              let isLater = this.compareDate(now, item.endDate)
              if (isEarly) {
                text = '未开始'
              } else if (!isEarly && isLater) {
                text = '进行中'
              } else if (!isEarly) {
                text = '已结束'
              }
              break;
          }
          break;
        }
      return text
    },
    compareDate(value1, value2) {
      let date1 = new Date(value1).getTime()
      let date2 = new Date(value2).getTime()
      return (date1 < date2)
    },
    getData() {
      let param = {
        activitySn: this.list.form.activitySn,
        activityStatus: 0,
        activityType: this.list.form.activityType,
        skuSn: this.list.form.skuId,
        productSn: this.list.form.spuId,
        size: this.list.pageSize,
        current: this.list.currentPage
      }
      this.list.status = "loading";
      param = clearEmpty(param)
      this.$ajaxGet("/activity/page", param).then(data => {
        data.records = data.records || [];
        this.list.data = data.records.map(obj => {
          return {
            ...obj,
            statusText: this.getStatus(obj)
          }
        })
        this.list.totalItem = Number(data.total);
        this.list.currentPage = Number(data.current);
        this.backTableTop();
        this.list.status = "pass";
      }).catch(()=> {
          this.list.status = "error";
      })
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.$router.push({
        name: "sales/examine/list",
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1;
      this.list.pageSize = pageSize;
      this.$router.push({
        name: "sales/examine/list",
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      });
      this.getData();
    }
  }
}
</script>

